<template>
    <div>
        <el-row :gutter="10" style="margin-bottom: 12px">
            <el-col :span="6">
                <el-card  style="color: #409Eff">
                    <div><i class="el-icon-user-solid"></i>用户总数</div>
                    <div style="padding: 1px;text-align: center;font-weight: bold">998</div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card style="color: #F56C6C">
                    <div><i class="el-icon-medal-1"></i>销售总量</div>
                    <div style="padding: 1px;text-align: center;font-weight: bold">￥1000000</div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card style="color: #67C23A">
                    <div ><i class="el-icon-coin"></i>收益金额</div>
                    <div style="padding: 1px;text-align: center;font-weight: bold">3000</div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card  style="color: #E6A23C">
                    <div><i class="el-icon-aim"></i>风险</div>
                    <div style="padding: 1px;text-align: center;font-weight: bold">16%</div>
                </el-card>
            </el-col>
        </el-row>
        <el-row >
            <el-col :span="12">
                <div id="main" style="width: 400px; height: 300px; margin: 50px auto 0 50px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="pie" style="width: 400px; height: 300px; margin: 30px auto 0 50px;"></div>
            </el-col>
        </el-row>
<!--      <el-row>-->
<!--        <el-col :span="12">-->
<!--          <div style="margin: 30px auto 0 100px;">-->
<!--            <template>-->
<!--              <a-card hoverable style="width: 300px">-->
<!--                <img-->
<!--                    slot="cover"-->
<!--                    alt="example"-->
<!--                    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"-->
<!--                />-->
<!--                <template slot="actions" class="ant-card-actions">-->
<!--                  <a-icon key="setting" type="setting" />-->
<!--                  <a-icon key="edit" type="edit" />-->
<!--                  <a-icon key="ellipsis" type="ellipsis" />-->
<!--                </template>-->
<!--                <a-card-meta title="Card title" description="This is the description">-->
<!--                  <a-avatar-->
<!--                      slot="avatar"-->
<!--                      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"-->
<!--                  />-->
<!--                </a-card-meta>-->
<!--              </a-card>-->
<!--            </template>-->
<!--          </div>-->

<!--        </el-col>-->
<!--        <el-col :span="12">-->

<!--        </el-col>-->
<!--      </el-row>-->

      <div style="margin-bottom: 12px">
        <template>
          <div>
            <a-rate allow-half>
              <a-icon slot="character" type="heart" />
            </a-rate>
          </div>
        </template>
      </div>


<!-- in ./src/components/Header.vue?vue&type=script&lang=js-->


    </div>
</template>

<script>
    import * as echarts from 'echarts';
    import {QRCode} from 'ant-design-vue'

    export default {
        name: "Home",
        data(){
            return{
                x:[],
                y:[],
                value:1,
            }
        },
        // components:{
        //   AQRCode:QRCode
        // },
        methods:{
          onPanelChange(value, mode) {
            // console.log(value, mode);
          },
        },
        created() {
        },
        mounted() {// 页面元素渲染完之后再触发

            // 折线图
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                title:{
                    text:'各季度用户数量',
                    subtext:'趋势图',
                    left:'center'
                },
                legend:{
                  orient:'vertical',
                  left: 'left'
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    data: ['第一季度','第二季度','第三季度','第四季度']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [],
                        type: 'line'
                    },
                    {
                        name: '奶昔',
                        data: [],
                        type: 'bar'
                    },
                    {
                        data: [],
                        type: 'line'
                    },
                    {
                        name: '甄姬',
                        data: [],
                        type: 'bar'
                    }
                ]
            };


            // 饼图
            var piechartDom = document.getElementById('pie');
            var piemyChart = echarts.init(piechartDom);
            var pieoption;

            const piePatternSrc =
                '';
            const bgPatternSrc =
                '';
            const piePatternImg = new Image();
            piePatternImg.src = piePatternSrc;
            const bgPatternImg = new Image();
            bgPatternImg.src = bgPatternSrc;
            pieoption = {
                backgroundColor: {
                    image: bgPatternImg,
                    repeat: 'repeat'
                },
                title: {
                    text: '各季度用户数量',
                    textStyle: {
                        color: '#235894'
                    }
                },
                tooltip: {},
                series: [
                    {
                        name: '果茶',
                        type: 'pie',
                        selectedMode: 'single',
                        selectedOffset: 30,
                        radius:'40%',
                        center:['25%','50%'],
                        clockwise: true,
                        label: {
                            fontSize: 12,
                            color: '#235894',
                            position:'inner',
                            color:'#000000',
                            formatter:'{d}%'
                        },
                        labelLine: {
                            lineStyle: {
                                color: '#235894'
                            }
                        },
                        data: [
                        ],
                        itemStyle: {
                            opacity: 0.7,
                            color: {
                                image: piePatternImg,
                                repeat: 'repeat'
                            },
                            borderWidth: 3,
                            borderColor: '#235894'
                        }
                    },
                    {
                        name: '奶茶',
                        type: 'pie',
                        selectedMode: 'single',
                        selectedOffset: 30,
                        radius:'30%',
                        center:['75%','50%'],
                        clockwise: true,
                        label: {
                            fontSize: 12,
                            color: '#235894',

                            formatter:'({d}%)'
                        },
                        labelLine: {
                            lineStyle: {
                                color: '#235894'
                            }
                        },
                        data: [
                        ],
                        itemStyle: {
                            opacity: 0.7,
                            color: {
                                image: piePatternImg,
                                repeat: 'repeat'
                            },
                            borderWidth: 3,
                            borderColor: '#235894'
                        }
                    }
                ]
            };
            this.request.get("/echarts/members").then(res=>{
                option.series[0].data = res.data
                option.series[1].data = res.data
                option.series[2].data = [9,7,8,3]
                option.series[3].data = [9,7,8,3]
                pieoption.series[0].data = [
                    {name:"第一季度",value:res.data[0]},
                    {name:"第二季度",value:res.data[1]},
                    {name:"第三季度",value:res.data[2]},
                    {name:"第四季度",value:res.data[3]}
                ]
                pieoption.series[1].data = [
                    {name:"第一季度",value:90},
                    {name:"第二季度",value:50},
                    {name:"第三季度",value:10},
                    {name:"第四季度",value:80}
                ]
                // 数据准备完毕后再set
                myChart.setOption(option);
                pieoption && piemyChart.setOption(pieoption);

            })

        }
    }
</script>

<style scoped>

</style>